<template>
  <div id="BaseHeader">
    <div class="baseHeader">
      <el-header style="width: 100%; height: 153px; padding:0;  background-color: #4ce230;" class="top-header">

        <div style="    background-color: white; width: 100%;">


    
        <el-row style="width: 1400px; margin: auto;" >
          <el-col :span="4" :offset="2">
            <div class="grid-content">
              <img style="width: 140px;" src="../../assets/flower.jpg" />
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content text-shadow">去哪嗨</div>
          </el-col>
          <el-col :span="8" class="el-col-phone">
            <div class="grid-content">
              <i class="el-icon-phone-outline"></i> 24小时服务热线：
              <span class="tel">123-456-7890</span>
            </div>
          </el-col>
        </el-row>

      </div>

        <div style="    background-color:  #4ce230; width: 100%;">
        <el-row class="el-row-header" style="width: 1400px; margin: auto;">
          <el-col :span="12" :offset="2">
            <div class="grid-content">
              <el-menu
                background-color="#4ce230"
                text-color="#fff"
                active-text-color="#ffd04b"
                class="el-menu-header"
                mode="horizontal"
                @select="handleSelect"
                :router="true"
              >
                <el-menu-item
                  v-for="list in menuData"
                  :key="list.id"
                  :index="list.href"
                >{{list.title}}</el-menu-item>
              </el-menu>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content search-content">
              <!-- <el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input> -->

              <el-autocomplete
                prefix-icon="el-icon-search"
                popper-class="my-autocomplete"
                v-model="state"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelectEQ"
              >
                <template slot-scope="{ item }">
                  
                      <!-- <router-link :to="{name:'HotePage', query: {id:item.id}}"> -->
                       <div class="name">{{ item.title }}</div>
                     <!-- </router-link> -->
                 
                  <!-- <span class="addr">{{ item.id }}</span> -->
                </template>
              </el-autocomplete>
            </div>
          </el-col>

          <el-col el-col :span="2">
            <div class="userentrance">
              <login v-show="UserName=='请登录'"></login>

              <el-dropdown @command="handleCommand" v-show="UserName!='请登录'">
                <span class="el-dropdown-link">
                  <router-link :to="{ name: 'User'}" class="userLink">欢迎：{{UserName}}</router-link>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus">
                    <router-link :to="{ name: 'User'}">个人中心</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus" command="out">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>

        </div>
      </el-header>
    </div>
  </div>
</template>

<script>
import login from "@/components/login/login";
export default {
  name: "BaseHeader",
  data() {
    return {
      activeIndex: "./",
      UserName: "未登录",
      menuData: [
        {
          id: "1",
          title: "首页",
          href: "/"
        },
        {
          id: "2",
          title: "景点",
          href: "/scenery"
        },
        {
          id: "3",
          title: "住宿",
          href: "/hotel"
        },
        {
          id: "4",
          title: "旅游攻略",
          href: "/strategy"
        }
      ],
      restaurants: [],
      state: "",
      timeout: null
    };
  },
  inject: ["reload"],
  // mounted: function() {
  //   const h = this.$createElement;
  //   this.$notify({
  //     title: '2018新年出游计划',
  //     message: h('div', { style: 'color: red;font-weight: bold;font-size: 30px;' }, '全场最高立减五百元'),
  //     duration: 50000
  //   });
  // },

  created: function() {
    var name = localStorage.getItem("user_name");
    if (name != null) {
      this.UserName = name;
    } else {
      this.UserName = "请登录";
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    logout() {
      localStorage.setItem("user_role", null);
    },
    handleCommand(command) {
      if (command == "out") {
        localStorage.clear();
        this.reload();
      }
    },
    querySearch(queryString, cb) {

      // // 调用 callback 返回建议列表的数据
      if(queryString.length==0){
        return
      }
      var d = { q: queryString };
      this.$api.userAPI.get_Search(d).then(res => { 
        var data=[]
        data = res.data.data;
        if(data.length!=0){
            console.log(data.length)
            cb(data);
           
        }
      });
//  cb([{"title":1,"id":1},{"title":2,"id":2}]);
      // cb([{"title":1},{"title":2}]);
    },

    handleSelectEQ(item) {
      // this.reload();  
      console.log(item);
      this.state = item.title
      if(item.typename=="hote"){
         this.$router.replace({path:'/hote/page',query: {id:item.id}})
      }else if(item.typename=="strtrgy"){
        this.$router.replace({path:'/Strategy/Page',query: {id:item.id}})
        console.log("strtrgy");
      }else if(item.typename=="scenery"){
        this.$router.replace({path:'/scenery/Page',query: {id:item.id}})
        console.log("scenery");
      }
      
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },

  components: {
    login
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#BaseHeader,
.baseHeader {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

ul > li {
  list-style-type: none;
}

.top-header {
  background: #fff;
}

/*.bottom-footer {*/
/*  background: #e3e4e8;*/
/*  line-height: 80px;*/
/*  color: #8a8686;*/
/*  text-align: center;*/
/*}*/

/*.main-content {*/
/*  margin: 0 auto;*/
/*}*/

.top-header .el-row-header {
  background-color: #4ce230;
}

.top-header .el-menu-header {
  border-bottom: 0;
}

.top-header .el-menu-header .el-menu-item {
  font-size: 18px;
}

.top-header .text-shadow {
  text-shadow: #f7e207 0 0 10px;
  color: white;
  font-size: 60px;
}

.top-header .el-col-phone {
  height: 90px;
  line-height: 120px;
  font-size: 25px;
}

.top-header .tel {
  font-family: "微锟斤拷锟脚猴拷";
  color: #c00;
}

.search-content {
  height: 60px;
  line-height: 60px;
}
.el-dropdown-link {
  cursor: pointer;
  color: rgb(255, 255, 255);
}
.userLink {
  color: white;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  /* display: block; */
  color: #ffffff;
  font-size: 14px;
  /* margin-bottom: 20px; */
}
.userentrance {
  padding: 20px 0px 0px 20px;
}
/*.el-notification__group {*/
/*  cursor: default;*/
/*}*/
</style>
